<template>
<div>
  <div class="table-data">
    <div class="search-box">
      <el-input size="small" v-model="keyword" placeholder="商品名称"></el-input>
      <!-- <el-date-picker
        v-model="dateTime"
        type="datetimerange"
        value-format="yyyy-MM-dd hh:mm:ss"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"> 
      </el-date-picker>-->
      <el-select v-model="shop_id" v-if="manage=='admin'" clearable placeholder="全部商家">
        <el-option v-for="item in businessList" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
      <el-button size="small" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
    </div>
    <el-table 
      v-loading="loading"
      element-loading-text="正在加载"
      element-loading-spinner="el-icon-loading" :data="tableData"  style="width:100%" :height="tHeight" class="table-box">
      <el-table-column label="id" prop="id" width="100"></el-table-column>
      <el-table-column label="商品名称" width="250">

            <template slot-scope="scope"> 
              <div class="commodity-name">
              <el-popover placement="right" title="" trigger="hover">
              <img :src="scope.row.cover" style="max-width: 300px; max-height: 300px;"/>
              <img slot="reference" class="commodity-image" :src="scope.row.cover" :alt="scope.row.cover">
			   </el-popover>
              <p style="width: 300px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap" >{{scope.row.title}}</p>
              </div>
            </template>
            
        </el-table-column>
      <el-table-column label="商家名称" prop="" v-if="manage=='admin'" width="160">
        <template slot-scope="scope">
          <p>{{scope.row.shop ? scope.row.shop.name : '/'}}</p>
        </template>
      </el-table-column>
      <el-table-column label="规格" prop="ticket.spec_item.key_name" v-if="manage=='admin'"></el-table-column>
      <el-table-column label="核销码" prop="code" width="70"></el-table-column>
      <el-table-column label="核销时间" prop="use_time" width="180"></el-table-column>
      <el-table-column label="有效期" >
        <template slot-scope="scope">
          <p>{{scope.row.verify_start_time}}~{{scope.row.verify_end_time}}</p>
        </template>
      </el-table-column>
      <el-table-column label="操作人" prop="real_name" width="100"></el-table-column>
      <el-table-column label="操作" prop="" v-if="manage=='admin'" width="160">
        <template slot-scope="scope">
          <el-button size="small" type="danger"  @click="handleRollback(scope.row.id)">取消核销</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pages" ref="page-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10,30,50]"
        :page-size="size"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
  </div>
</template>

<script lang="ts">

import { Component, Vue, Provide,Prop,Watch } from "vue-property-decorator";
// import { State, Getter, Mutation, Action } from "vuex-class";
import writeApi from "@/api/write";
import businessApi from "@/api/business";

@Component({
  components: {}
})
export default class recordList extends Vue {
  // @Getter("user") getUser: any;
  @Provide() dateTime: any = ["",""]; // 时间
  @Provide() tHeight: number = document.body.offsetHeight - 323;
  @Provide() tableData: any = []; // 表格数据
  @Provide() multipleTable: any = []; // 表格数据
  @Provide() page: number = 1; // 当前page
  @Provide() shop_id: any = ''; // 当前page
  @Provide() size: number = 10; // 请求数据的个数 默认5
  @Provide() total: number = 0; // 总数据条数
  @Provide() isAdd: Boolean = false; // 是否展示添加弹窗
  @Provide() isEdit: Boolean = false; // 是否展示编辑弹窗
  @Provide() status: any = '';//禁用状态
  @Provide() loading: Boolean = true; // 是否显示加载图标
  @Provide() businessList: any=[];//商家列表
  @Provide() searchData: any = {
    pageNum: 1
  };
  @Provide() keyword:any=''
  @Provide() manage:any='' // 当前登录的类型
  // 关闭弹窗
  closeDialog() {
    this.isAdd = false;
    this.isEdit = false;
  }
  created() {
    let manage:any=localStorage.getItem('manage')
    this.manage =JSON.parse(manage).type;
    // 商家
    businessApi.businessList(1,999999,{
      keyword: "",
      cate_id: "",
      is_child: 0
    }).then((res: any) => {
      this.businessList = res.data.data.list;
    });
    this.loadData();
  }

  loadData() {
    if (this.manage == 'admin') {
      writeApi.writeVerifyListList(this.page, this.size, this.keyword, this.shop_id)
          .then((res: any) => {
            this.loading=false;
            if(res.data.data.list) {
              this.tableData = res.data.data.list;
              this.total = res.data.data.total;
            } else {
              this.$message({
                message: '未找到核销记录',
                type: "error"
              });
            }
          });
    } else {
      // 商家端的核销记录
      writeApi.writeOffList(this.page,this.size,this.keyword)
              .then((res: any) => {
                this.loading=false;
                if(res.data.data.list) {
                  this.tableData = res.data.data.list;
                  this.total = res.data.data.total;
                } else {
                  this.$message({
                    message: '未找到核销记录',
                    type: "error"
                  });
                }
              });
    }
  }

  handleSizeChange(val: number): void {
    this.size = val;
    this.page = 1;
    this.loadData();
  }

  handleCurrentChange(val: number): void {
    this.page = val;
    this.loadData();
  }
  headClass() {
            return "text-align: center;background:#eef1f6;";
        }

  handleSearch(): void {
    this.page = 1;
    this.loadData();
  }
  handleRollback(val: number):void {
    this.$confirm('此操作将删除该记录并回滚核销码, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
           closeOnClickModal:false,
          type: 'warning'
        }).then(() => {

          writeApi.writeRollback({id:val}).then((response: any) => {
              if(response.data.status){
                  this.$message({
                    type: 'success',
                    message: '回滚成功'
                  })
                  this.loadData();
              }else{
                this.$message({
                    type: 'error',
                    message: '回滚失败'
                  })
              }
           })
        })
  }
}
</script>

<style lang="scss">
.el-range-editor.el-input__inner{
  margin-right: 10px
}
.el-table .cell {
  text-align: center !important;
}
.commodity-name{
      display:flex;
      flex-wrap: nowrap;
      padding: 6px;
      .commodity-image{
        width: 50px;
        height:50px;
      }
      p{
        margin:auto 10px;
      }
    }
</style>
